<template>
	<view class="container">
		<view class="picker">
			<view class="picker_text">
				<image v-if="index !== ''" class="filter" src="/static/image/filter1.png"></image>
				<image v-else class="filter" src="/static/image/filter.png"></image>
				<view :class="{active:index!==''}">筛选：</view>
			</view>
			<picker @change="bindPickerChange" :value="index" :range="plan" range-key="tagName">
				<view class="uni-input">{{tagName}}</view>
			</picker>
		</view>
		<empty v-if="publicListAll.length == 0"></empty>
		<view class="list_box" v-for="(item,mIndex) in publicListAll" @click="navToDetails(item)">
			<view class="border"></view>
			<view class="list-icon borderStyle">
				<view style="font-size: 36upx;font-weight: normal;">
					{{item.month}}-{{item.day}}
				</view>
				<view>{{item.year}}</view>
			</view>
			<view class="list_title">{{item.title}}</view>
		</view>
		<!-- 待完善 -->
		<uni-load-more :status="loadingType" style="height: 60upx;"></uni-load-more>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				communityId: this.$api.util.getAreaCode(),
				loadingType: 'more',
				plan: [{
					tagName:''
				}],
				tagName: '请选择',
				index: '',
				page: 1,
				publicListAll: []
			}
		},
		components: {
			empty
		},
		onLoad() {
			this.inquiryTag()
			this.getArticalList(this.page,0)
		},
		onReachBottom() {
			if (this.loadingType === 'more') {
				this.page = this.page + 1;
				this.getArticalList(this.page,0)
			}
		},
		// onLoad() {
		// 	this.publicList = this.publicListAll
		// },
		methods: {
			inquiryTag() {
				let params = {
					"areaCode": this.communityId,
					"tagType": 'EMERGENCY'
				}
				this.$api.request.inquiryTag(params, (res) => {
					console.log(res.body.data)
					if (res.body.status.statusCode == "0") {
						this.plan = res.body.data.tags
						let array = {
							tagName: '所有类别'
						}
						this.plan.unshift(array)
					}
				},true)
			},
			//查询办事指南
			getArticalList: function(page, index) {
				let that = this;
				if (index == 0) {
					this.tagName = '所有类别'
				} else {
					this.tagName = this.plan[index].tagName
				}
				let upTag=""
				if(this.tagName=='所有类别'){
					upTag=""
				}else{
					upTag=this.tagName
				}
				
				this.$api.request.getArticalList({
					"areaCode": this.communityId,
					"pageSize": 10,
					"page": page,
					"tagType": "EMERGENCY",
					"tagName": upTag,
					"isPublished": true
				}, function(res) {
					if (res.body.status.statusCode === '0') {
						let arrs = res.body.data.list;
						let womenLists = [];
						for (var i = 0; i < arrs.length; i++) {
							let times = arrs[i].publishTime.split(" ")[0].split("-");
							arrs[i].year = times[0];
							arrs[i].month = times[1];
							arrs[i].day = times[2];
							womenLists.push(arrs[i])
						};
						that.publicListAll = womenLists;
						console.log(that.publicListAll)
						var total = res.body.data.total
						if (that.publicListAll.length >= total) {
							that.loadingType = 'noMore'
						}
					}
				})
			},
			navToDetails(item) {
				uni.navigateTo({
					url: '/package_isp/pages/threeAffairs/details?dataUuid=' + item.pressReleaseUuid
				})
			},
			bindPickerChange(e) {
				this.index = e.detail.value
				console.log(this.index)
				this.getArticalList(this.page, this.index)
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		overflow: hidden;
		padding: 32upx;
	}

	.picker {
		display: flex;
		align-items: center;
		margin-bottom: 16upx;
		color: #7A7A7A;
		font-size: 30upx;
		position: relative;
		z-index: 99;
	}

	.active {
		color: #3E9CF9;
	}

	.picker_text {
		display: flex;
		align-items: center;
	}

	.filter {
		width: 34upx;
		height: 34upx;
		margin-right: 8upx;
	}

	.list_box {
		background: #FFFFFF;
		box-shadow: 2upx 2upx 22upx -2upx rgba(0, 0, 0, 0.1);
		height: 120upx;
		display: flex;
		margin-bottom: 24upx;
	}

	.border {
		width: 10upx;
		height: 100%;
		background: #3E9CF9;
	}

	.list-icon {
		font-size: 24upx;
		text-align: center;
		font-weight: lighter;
		margin-right: 32upx;
		padding: 18upx;
		width: 150upx;
		position: relative
	}

	.borderStyle::after {
		content: '';
		position: absolute;
		bottom: 30upx;
		right: 0;
		height: 60upx;
		width: 2upx;
		background-color: #979797;
	}

	.list_title {
		width: 488upx;
		line-height: 120upx;
		border-radius: 50upx;
		font-size: 30upx;
		font-weight: bold;
		transition: all .5s;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
